<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/11/7
  Time: 14:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="/js/jquery.1.9.1.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script type="text/javascript" src="/layui/layui.js"></script>
</head>
<body>
<div style="width: 600px">
    <div id="tree1"></div>
    <div id="add-node" class="x-body" style="display: none;">
        <form class="layui-form" id="add-form" action="">
            <input type="text" id="NodeID1" name="id" style="display:none;" class="layui-input">
            <div class="layui-form-item center">
                <label class="layui-form-label" style="width: 100px">节点名字</label>
                <div class="layui-input-block">
                    <input type="text" name="title" style="width: 240px" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="addnode">确定</button>
                </div>
            </div>
        </form>
    </div>

    <div id="edit-node" class="x-body" style="display: none;">
        <form class="layui-form" id="edit-form" action="">
            <input type="text" id="nodeId" name="id" style="display:none;" class="layui-input">
            <div class="layui-form-item center">
                <label class="layui-form-label" style="width: 100px">节点名字</label>
                <div class="layui-input-block">
                    <input type="text" id="Title" name="name" style="width: 240px" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="editnode">确定</button>
                </div>
            </div>
        </form>
    </div>
</div>
    <script type="text/javascript">
        layui.use(['tree','form','layer'],function () {
           var tree=layui.tree;
           var form=layui.form;
           var layer=layui.layer;
            //树数据渲染{code:0,count,data:[]}
            //1.显示树节点,没有数据源
            var treeInst= tree.render({
                elem:'#tree1',
                data:[],
                edit: ['add', 'update', 'del']
                , operate: function (obj) {
                   // console.info(obj.type);
                   // console.info(obj.data);
                    //得到节点索引 增加时这个id 应该是pid  update 当前节点
                    var id = obj.data.id;
                    if(obj.type=='del'){
                        $.ajax({
                            url: '/contentcat/del',//根据id来删除一个分类
                            type: 'post',
                            dataType: 'json',
                            data: {
                                id: id
                            },
                            success: function (r) {
                                if (r.status == 200) {
                                    layer.msg('删除成功', { icon: 6 });
                                } else {
                                    layer.msg('删除失败', { icon: 5 });
                                }
                            },
                            error: function (s) {
                                layer.msg('删除出错了');
                            }
                        });
                    }else if(obj.type=='update'){//修改当前节点 id  name
                        $("#nodeId").val(id);
                        $("#Title").val(obj.data.title);
                        index0pen = layer.open({
                            type: 1,
                            title: "编辑",
                            area: ['500px', '200px'],
                            content: $("#edit-node")
                        });
                    }else{//增加一个新节点
                        $("#NodeID1").val(id);//这个id为pid
                        index0pen = layer.open({
                            type: 1,
                            title: "新增",
                            area: ['500px', '200px'],
                            content: $("#add-node"),//id  pid

                        });
                    }

                }
        });

            //增加一个新节点
            form.on('submit(addnode)', function (data) {
                var nodeData = data.field;
                $.ajax({
                    url: '/contentcat/add',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        name: nodeData.title,//新节点的名称
                        pid: nodeData.id    //新节点的父节点
                    },
                    success: function (r) {
                        if (r.status == 200) {
                            layer.msg('添加成功', { icon: 6 });
                            layer.closeAll();

                        } else {
                            layer.msg('添加失败', { icon: 5 });
                        }
                    },
                    error: function (s) {
                        layer.msg('保存出错了');
                    }
                });
                return false;
            });


            //完成修改数据提交
            form.on('submit(editnode)', function (data) {
                var nodeData = data.field;
                $.ajax({
                    url: '/contentcat/update',
                    type: 'post',
                    dataType: 'json',
                    //data:$("#updatForm").serialize()
                    data: {
                        name: nodeData.name,//提交控制器的请求参数
                        id: nodeData.id
                    },
                    success: function (r) {
                        if (r.status == 200) {
                            layer.msg('修改成功', { icon: 6 });
                            layer.closeAll();
                        } else {
                            layer.msg('修改失败', { icon: 5 });
                        }
                    },
                    error: function (s) {
                        layer.msg('修改出错了');
                    }
                });
                return false;
            });

            //2.向服务器发请求取原始数据{id,title,pid}  List<TreeNode>
            $.ajax({
                url:'listCat',
                type:'post',
                dataType:'json',
                success:function (resp) {//[{id:101,title:'abc',pid:0]
                    fn(resp);//对原始数据处理
                    treeInst.reload({
                        data:resultObj//将处理后的结果赋值的data[数据源]
                    })
                }

            })
            var resultObj=[];
            function fn(jsonData) {
                //取得顶级的数据
                for(var i=0;i<jsonData.length;i++){
                    if(jsonData[i].pid==0){
                        resultObj.push(jsonData[i]);
                    }
                }
                getChildren(resultObj, jsonData)
            }

            function getChildren(nodeList, jsonData) {
                nodeList.forEach(function(elemet, index) {
                    elemet.children = jsonData.filter(function(item, indexI) {
                        return item.pid === elemet.id
                    })
                    if(elemet.children.length > 0) {
                        getChildren(elemet.children, jsonData)
                    }
                })
            }
        });
    </script>
</body>
</html>
